import React, { useEffect, useState } from "react";
import axios from "axios";

function Counter(props) {
    let [count, setCount] = useState(() => {
        return props.num ** 2;
    });

    return (
        <button onClick={() => setCount(count + 1)}>{count}</button>
    );
}

function App() {
    const [name, Setname] = useState(() => {
        return 'zyx';
    });
//     const [List, setList] = useState(async () => {
//         const res = await axios.get('https://mock.mengxuegu.com/mock/66585c4db462b81cb3916d3e/songer/songer#')
//         setList(res.data.data)
// });//这么写代码很优雅
        const [List, setList] = useState([]);
        useEffect(() => {
            async function getData() {
                const res = await axios.get('https://mock.mengxuegu.com/mock/66585c4db462b81cb3916d3e/songer/songer#')
                setList(res.data.data)
            }
            getData()
        },[])//[] 空数组 只执行一次(哪怕整个 App 函数重新执行，useEffect 不会重新执行)     
console.log(List);


   
   
  
    return (
        <div>
            <h1>hello {name}</h1>
            <Counter num={10} />
            <ul>
                {
                    Array.isArray(List) ?
                    List.map(item => {
                        return <li key={item.name}>{item.name}</li>
                    }) :
                    null
                }
            </ul>
        </div>
    );
}

export default App;